<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入vue的库，从公网CDN导入 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 创建一个带有id=app的div，vue应用程序的根元素 -->
    <div id="app">
      <!--vue 模板语法中的插值表达式，可以直接显示vue定义的数据内容-->
        <p>{{ message }}</p>
        <p>{{count}}</p>
        <!--定义了一个按钮，click，可以调用js的脚本或者函数-->
        <button @click="count++">
            Count is : {{ count }}
        </button>
    </div>

    <script>
        //从Vue 对象中提取出createApp这个函数
        const {createApp} = Vue
        // 创建一个新的vue应用程序实例，并将其挂载到id为app的这个元素上
        createApp({
            //data: 用于定义组件或者实例中的数据
            data() {
                //把数据导出，可以被元素使用
                //这些数据是双向绑定的
                return {
                    message: 'Hello Vue!',
                    count: 0
                }
            }
        }).mount('#app')
    </script>
</head>
<body>

</body>
</html>